<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTTP 知识汇总 | 20秒的勇气</title>
    <meta name="generator" content="VuePress 1.5.3">
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?01611e9c2d4c65531fe791d0a83e6ebd";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })()</script>
    <meta name="description" content="欢迎来到wenbintian的博客">
    <link rel="preload" href="/blog/assets/css/0.styles.5dc057b1.css" as="style"><link rel="preload" href="/blog/assets/js/app.2a047d56.js" as="script"><link rel="preload" href="/blog/assets/js/2.cc145974.js" as="script"><link rel="preload" href="/blog/assets/js/27.38ec3468.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.dc9f6a74.js"><link rel="prefetch" href="/blog/assets/js/11.f7ecaf96.js"><link rel="prefetch" href="/blog/assets/js/12.4363725a.js"><link rel="prefetch" href="/blog/assets/js/13.0fd4b251.js"><link rel="prefetch" href="/blog/assets/js/14.edc7bd5f.js"><link rel="prefetch" href="/blog/assets/js/15.647c0964.js"><link rel="prefetch" href="/blog/assets/js/16.2e8857c5.js"><link rel="prefetch" href="/blog/assets/js/17.1c7cc9ee.js"><link rel="prefetch" href="/blog/assets/js/18.bf88a22d.js"><link rel="prefetch" href="/blog/assets/js/19.1433c5a8.js"><link rel="prefetch" href="/blog/assets/js/20.713720d3.js"><link rel="prefetch" href="/blog/assets/js/21.51a3d47b.js"><link rel="prefetch" href="/blog/assets/js/22.04488762.js"><link rel="prefetch" href="/blog/assets/js/23.b9337410.js"><link rel="prefetch" href="/blog/assets/js/24.d0d5b562.js"><link rel="prefetch" href="/blog/assets/js/25.e76a54ef.js"><link rel="prefetch" href="/blog/assets/js/26.006d0afa.js"><link rel="prefetch" href="/blog/assets/js/28.c8cf7077.js"><link rel="prefetch" href="/blog/assets/js/29.70f03487.js"><link rel="prefetch" href="/blog/assets/js/3.9bfe5560.js"><link rel="prefetch" href="/blog/assets/js/30.3e6d6ba9.js"><link rel="prefetch" href="/blog/assets/js/31.1dbd85cb.js"><link rel="prefetch" href="/blog/assets/js/32.208e4272.js"><link rel="prefetch" href="/blog/assets/js/33.979228dd.js"><link rel="prefetch" href="/blog/assets/js/34.6ad6fae2.js"><link rel="prefetch" href="/blog/assets/js/35.59b3e591.js"><link rel="prefetch" href="/blog/assets/js/36.7239d917.js"><link rel="prefetch" href="/blog/assets/js/37.a8305f70.js"><link rel="prefetch" href="/blog/assets/js/38.7e3197cd.js"><link rel="prefetch" href="/blog/assets/js/39.1bb3ad3b.js"><link rel="prefetch" href="/blog/assets/js/4.3b6a7e49.js"><link rel="prefetch" href="/blog/assets/js/40.bc263e99.js"><link rel="prefetch" href="/blog/assets/js/41.4ee25f6a.js"><link rel="prefetch" href="/blog/assets/js/42.37c6cc26.js"><link rel="prefetch" href="/blog/assets/js/43.9a40d780.js"><link rel="prefetch" href="/blog/assets/js/44.2eda0bb6.js"><link rel="prefetch" href="/blog/assets/js/45.ce3372d9.js"><link rel="prefetch" href="/blog/assets/js/46.17e44796.js"><link rel="prefetch" href="/blog/assets/js/47.f845ed6d.js"><link rel="prefetch" href="/blog/assets/js/5.bc6e1aa4.js"><link rel="prefetch" href="/blog/assets/js/6.e0f80af7.js"><link rel="prefetch" href="/blog/assets/js/7.c808e2d2.js"><link rel="prefetch" href="/blog/assets/js/8.902b76dc.js"><link rel="prefetch" href="/blog/assets/js/9.9bb8a7fe.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.5dc057b1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">20秒的勇气</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/knowledge/" class="nav-link router-link-active">
  知识篇
</a></div><div class="nav-item"><a href="/blog/notes/" class="nav-link">
  随身笔记
</a></div> <a href="https://github.com/wenbintian" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/knowledge/" class="nav-link router-link-active">
  知识篇
</a></div><div class="nav-item"><a href="/blog/notes/" class="nav-link">
  随身笔记
</a></div> <a href="https://github.com/wenbintian" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/book/" class="sidebar-heading clickable"><span>读书篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/tool/" class="sidebar-heading clickable"><span>工具篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/css/" class="sidebar-heading clickable"><span>CSS篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/js/" class="sidebar-heading clickable router-link-active open"><span>JS篇</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/es6/" class="sidebar-heading clickable"><span>ES6</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/vue/" class="sidebar-heading clickable"><span>VUE</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/other/" class="sidebar-heading clickable router-link-active open"><span>其他</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/knowledge/js/other/crossDomain.html" class="sidebar-link">跨域的方案</a></li><li><a href="/blog/knowledge/js/other/error.html" class="sidebar-link">Error 对象</a></li><li><a href="/blog/knowledge/js/other/getAndPost.html" class="sidebar-link">Get 和 Post的区别</a></li><li><a href="/blog/knowledge/js/other/http.html" aria-current="page" class="active sidebar-link">HTTP 知识汇总</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#含义" class="sidebar-link">含义</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#状态码" class="sidebar-link">状态码</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http常用字段" class="sidebar-link">HTTP常用字段</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http缺点" class="sidebar-link">HTTP缺点</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http-1-0" class="sidebar-link">HTTP/1.0</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http-1-1" class="sidebar-link">HTTP/1.1</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http-2-（不打算再发子版本，所以是叫-http-2-版本）" class="sidebar-link">HTTP/2 （不打算再发子版本，所以是叫 HTTP/2 版本）</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/other/http.html#http-原理" class="sidebar-link">HTTP 原理</a></li></ul></li><li><a href="/blog/knowledge/js/other/debounce-throttle.html" class="sidebar-link">JS的防抖(debounce)和节流(throttle)</a></li></ul></section></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="http-知识汇总"><a href="#http-知识汇总" class="header-anchor">#</a> HTTP 知识汇总</h1> <h2 id="含义"><a href="#含义" class="header-anchor">#</a> 含义</h2> <blockquote><p>HTTP 是超文本传输协议，即 HyperText Transfer Protocol.
HTTP 是一个在计算机世界里专门在【两点】之间【传输】文本、图片、视频等超文本数据的【约定和规范】。
以 ASCII 码传输，建立在 <code>TCP/IP</code>协议上的应用层规范。</p></blockquote> <ul><li>分为三部分：状态行、请求头、消息主体。</li></ul> <h2 id="状态码"><a href="#状态码" class="header-anchor">#</a> 状态码</h2> <table><thead><tr><th style="text-align:left;">状态码</th> <th style="text-align:left;">含义</th></tr></thead> <tbody><tr><td style="text-align:left;">1xx</td> <td style="text-align:left;">提示信息，协议处理的中间状态，还需后续操作</td></tr> <tr><td style="text-align:left;">2xx</td> <td style="text-align:left;">成功，报文已经收到并且被正确处理</td></tr> <tr><td style="text-align:left;">3xx</td> <td style="text-align:left;">重定向，资源位置发生变动，需要客户端重新发出请求</td></tr> <tr><td style="text-align:left;">4xx</td> <td style="text-align:left;">客户端错误，报文有误，服务器无法处理</td></tr> <tr><td style="text-align:left;">5xx</td> <td style="text-align:left;">服务器错误，服务器在处理请求时发生了错误</td></tr></tbody></table> <ul><li><code>201 Created</code>,请求已成功，并创建了一个新的资源，主要用于<code>POST</code>请求。</li> <li><code>202 Accepted</code>,请求已收到，但服务器还未处理。</li> <li><code>403</code>,表示服务器禁止访问资源，并不是客户端的请求出错。</li></ul> <h3 id="状态码-301-与-302"><a href="#状态码-301-与-302" class="header-anchor">#</a> 状态码 301 与 302</h3> <ul><li><code>301</code>代表永久性重定向</li> <li><code>302</code>代表暂时性性重定向</li> <li>重定向：浏览器拿到服务器返回的状态码后会自动跳转到一个新的<code>URL</code>地址（从响应首部<code>Location</code>字段中获取）</li> <li>301使用场景
<ul><li>域名到期或者想换个域名。</li> <li>空间服务器不稳定，换空间的时候。（服务器上一定大小的磁盘空间）</li></ul></li> <li>网址劫持（尽量使用301跳转）
<ul><li>网址<code>A</code>重定向到网址<code>B</code>,大部分搜索引擎只会去抓取目标网址<code>B</code>。但假如网址<code>A</code>很短，网址<code>B</code>很长且有各种参数，那么搜索引擎就可能保留网址<code>A</code>,这就导致网址<code>B</code>的内容全都显示再网址<code>A</code>上了。这就是网址劫持。</li> <li>导致网站<code>B</code>在为网站<code>A</code>做贡献，网址<code>A</code>的搜索排名变的更前了。</li></ul></li></ul> <h3 id="状态码-204"><a href="#状态码-204" class="header-anchor">#</a> 状态码 204</h3> <ul><li><code>204 No content</code>,请求执行成功，但响应头没有 body 数据。</li> <li>浏览器不用刷新页面.也不用导向新的页面。</li> <li>比如页面有个<code>form</code>表单，正常提交后会进行跳转，若状态码时204，则不会进行跳转，<code>a</code>标签也是一样。</li> <li>对于一些提交到服务器处理的数据，只需返回是否成功的情况，可以考虑204，从而省掉多余的数据传输。</li></ul> <h3 id="状态码-502、503、504"><a href="#状态码-502、503、504" class="header-anchor">#</a> 状态码 502、503、504</h3> <ul><li>502：服务器自身正常运行，从上游服务器收到无效响应。比如：<code>nginx + tomcat</code>。此时<code>tomcat</code>就是上游服务器（产生内容的服务器）</li> <li>503：（服务不可用） 服务器目前无法使用（由于超载或停机维护）。服务器当前很忙，暂时无法响应服务器，类似“网络服务正忙，请稍后重试”的意思.</li> <li>504：网关超时，由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答</li></ul> <h2 id="http常用字段"><a href="#http常用字段" class="header-anchor">#</a> HTTP常用字段</h2> <blockquote><p>Host：指定请求的服务器域名</p></blockquote> <blockquote><p>Content-Length：服务器返回数据的长度(字节)</p></blockquote> <blockquote><p>Connection：要求服务器使用 TCP 持久连接（HTTP/1.1默认就是持久连接），兼容旧版，指定<code>Connection: keep-alive</code></p></blockquote> <blockquote><p>Accept：表示客户端能接收的数据格式</p></blockquote> <blockquote><p>Content-Type：表示服务端回应的数据格式</p></blockquote> <blockquote><p>Accept-Encoding：表示客户端能接收什么样的数据压缩格式</p></blockquote> <blockquote><p>Content-Encoding：表示服务端采用什么样的数据压缩格式</p></blockquote> <h2 id="http缺点"><a href="#http缺点" class="header-anchor">#</a> HTTP缺点</h2> <ul><li><p>无状态（好处是减轻服务器的负担，坏处是每操作一次都要验证身份信息）</p> <ul><li>目前可通过<code>Cookie</code>，在请求和响应报文中加入<code>Cookie</code>信息来控制客户端的状态。</li></ul></li> <li><p>通信使用明文（不加密），内容可能会被窃听。</p> <ul><li>通信的加密，即通过<code>SSL(Secure Socket Layer, 安全套接层)</code>或者<code>TLS(Transport Layer Security,安全层传输协议)</code>的组合使用，即 <strong>用SSL建立安全通信线路，然后在这条线路上进行HTTP通信</strong>。称之为<code>HTTPS</code></li> <li>内容加密，即对通信的内容进行加密处理，客户端跟服务器应具备加密和加密的机制。</li></ul></li> <li><p>不验证通信方的身份，可能遭遇伪装。</p> <ul><li>可能是伪装的服务器或者客户端。</li> <li>无法确定正在通信的对方是否有访问权限</li> <li>一些无意义的请求都会照单全收</li></ul></li> <li><p>无法证明报文的完整性</p> <ul><li>在通信的过程，可能出现攻击篡改。</li></ul></li> <li><p><code>HTTP + 加密 + 认证 + 完整性保护 = HTTPS</code></p></li></ul> <h2 id="http-1-0"><a href="#http-1-0" class="header-anchor">#</a> HTTP/1.0</h2> <ul><li>可传输文字、图像、视频等超文本。</li> <li>除了<code>GET</code>,引入<code>POST</code>和<code>HEAD</code>命令。</li> <li>每次通信都必须包含头信息。新增状态码、缓存、内容编码等。</li> <li>头信息必须是 ASCII 码，后面的数据可以是其他格式（<code>Content-Type</code>）,也可以压缩（<code>Content-Encoding</code>）</li> <li><strong>缺点</strong> <ul><li>每个TCP连接只能发一个请求，发送数据完毕后，连接就关闭。（<code>Connection: keep-alive</code>,要求服务器不要关闭<code>TCP</code>连接，从而达到请求复用，但这不是标准，不同的实现行为可能不一致。）</li></ul></li></ul> <h2 id="http-1-1"><a href="#http-1-1" class="header-anchor">#</a> HTTP/1.1</h2> <ul><li>长连接（持久连接）
<ul><li><code>HTTP/1.0</code>, 每发起一个请求都需要新建一次<code>TCP</code>连接（三次握手），且是串行请求。</li> <li><code>HTTP/1.1</code>,新建一次<code>TCP</code>连接后，可进行多次请求，只要任意一端没有明确提出断开连接，则一直保持<code>TCP</code>连接。</li></ul></li> <li>管道网络传输
<ul><li>在同一个<code>TCP</code>连接里，可以同时发出多个请求，不需要依次的发。</li> <li>但是服务器还是按照<strong>顺序</strong>，依次回应相应的请求。假设前面的回应特别慢，就造成后面许多请求排队着，这就是<strong>队头阻塞</strong> <ul><li>减少请求数：合并脚本和样式表。</li></ul></li></ul></li></ul> <h2 id="http-2-（不打算再发子版本，所以是叫-http-2-版本）"><a href="#http-2-（不打算再发子版本，所以是叫-http-2-版本）" class="header-anchor">#</a> HTTP/2 （不打算再发子版本，所以是叫 HTTP/2 版本）</h2> <ul><li><strong>新的二进制格式</strong>。<code>HTTP/1.x</code>是基于文本协议的格式解析，文本的表现形式多样性，而二进制只认0和1的组合，实现方便且健壮。</li> <li><strong>多路复用</strong>。帧代表最小单位，每一<code>帧</code>会标识属于哪个<code>流</code>,同一<code>TCP</code>请求可发送多个请求，通过<code>帧</code>的标识来确定属于哪个请求的。</li> <li><strong>header压缩</strong>。<code>HTTP/1.x</code>的header带有大量信息，且每次请求都会带。而2.0在通信双方各自缓存了一份<code>header fields表</code>，即避免了重复的传输，又减小了传输的大小。</li> <li><strong>服务器推送</strong>。</li></ul> <h2 id="http-原理"><a href="#http-原理" class="header-anchor">#</a> HTTP 原理</h2> <ol><li>地址解析 （协议名、域名、端口、对象路径）</li> <li>域名系统<code>DNS</code>解析域名，得到<code>IP</code>地址</li> <li>封装成<code>HTTP</code>数据请求包</li> <li>封装成TCP包，建立<code>TCP</code>连接（三次握手） SYN =&gt; SYN + ACK =&gt; ACK</li> <li>客户端发送请求命令，格式为：统一资源标识符（URI）、协议版本号和信息内容</li> <li>服务器响应</li> <li>服务器关闭<code>TCP</code>连接。<code>Connection: keep-alive</code>可保持连接不关闭。
<a href="https://www.cnblogs.com/xiaolincoding/p/12442435.html" target="_blank" rel="noopener noreferrer">硬核！30 张图解 HTTP 常见的面试题<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后一次修改时间:</span> <span class="time">9/28/2020, 11:37:23 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/knowledge/js/other/getAndPost.html" class="prev">
        Get 和 Post的区别
      </a></span> <span class="next"><a href="/blog/knowledge/js/other/debounce-throttle.html">
        JS的防抖(debounce)和节流(throttle)
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/blog/assets/js/app.2a047d56.js" defer></script><script src="/blog/assets/js/2.cc145974.js" defer></script><script src="/blog/assets/js/27.38ec3468.js" defer></script>
  </body>
</html>
